<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="top" :style="dataBg">
      <div class="item" @click="showTable(5)">
        <div class="iten_son" :style="register">
          <div class="yellow">
            {{ countRegistrations.administratorCountNum }}
          </div>
        </div>
        <div class="text">食品安全员</div>
      </div>
      <div class="item" @click="showTable(4)">
        <div class="iten_son" :style="register">
          <div class="yellow">
            {{ countRegistrations.practitionerCountNum }}
          </div>
        </div>
        <div class="text">从业人员</div>
      </div>
    </div>
    <rz-height></rz-height>

    <!-- <div class="top" :style="dataBg">
      <div class="item" @click="showTable(10)">
        <div class="iten_son" :style="green">
          <div class="green">{{ data.codeGreen }}</div>
        </div>
        <div class="green">绿码</div>
      </div>
      <div class="item" @click="showTable(11)">
        <div class="iten_son" :style="yellow">
          <div class="yellow">{{ data.codeYellow }}</div>
        </div>
        <div class="yellow">黄码</div>
      </div>
      <div class="item" @click="showTable(12)">
        <div class="iten_son" :style="red">
          <div class="red">{{ data.codeRed }}</div>
        </div>
        <div class="red">红码</div>
      </div>

      <div class="item" @click="showTable(13)">
        <div class="iten_son" :style="note">
          <div style="color: #ffffff">
            {{ data.codeEmpty }}
          </div>
        </div>
        <div style="color: #ffffff">待完善</div>
      </div>
    </div> -->
    <div class="title" :style="note">
      人员信息码
      <!-- </div> -->
    </div>
    <rz-height></rz-height>
    <div style="padding-left: 20px">
      <div class="list">
        <div class="item" :style="note1" @click="showTable(10)">绿码:{{ data.codeGreen }}</div>
        <div class="item" :style="note2" @click="showTable(11)">黄码:{{ data.codeYellow }}</div>
        <div class="item" :style="note3" @click="showTable(12)">红码:{{ data.codeRed }}</div>
        <div class="item" :style="note4"  @click="showTable(13)">待完善:{{ data.codeEmpty }}</div>
      </div>
    </div>
    <div style="padding-left: 20px">
      <div id="main_right" style="width: 100%; height: 230px"></div>
    </div>
    <rz-height></rz-height>

    <div class="title" :style="note">
      食安履责卡
      <!-- </div> -->
    </div>
    <rz-height></rz-height>
    <div style="padding-left: 20px">
      <div id="main_chart" style="width: 100%; height: 260px"></div>
    </div>
    <!-- <div class="switch_wapper">
      <el-button-group class="switch">
      <el-button
        :type="!isCompany ? 'primary' : ''"
        @click="isCompany = false"
        size="mini"
        class="button"
        >餐饮单位</el-button
      >
      <el-button
        :type="isCompany ? 'primary' : ''"
        @click="isCompany = true"
        size="mini"
        class="button"
        >单位食堂</el-button
      >
    </el-button-group>
    <router-link :to="`/foodSafety/unit/unitRegisterStatistic?code=${code}`" class="link">查看更多</router-link>
  </div>
    <rz-height></rz-height>

    <div style="height: 220px">
      <el-table
        showSummary
        tooltip-effect="light"
        v-if="isCompany"
        :data="companyList"
        rowClassName="row_table"
        cellClassName="cell_table"
        headerCellClassName="header_table"
        align="center"
        headerAlign="center"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          header-align="center"
          prop="bodyIndustryRemarks"
          label="单位业态"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shouldRegister"
          label="应注册"
          width="70"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="registered"
          label="已注册"
          width="60"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="administratorNum"
          label="食安管理员"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="practitionerNum"
          label="从业人员"
          align="right"
          header-align="center"
        >
        </el-table-column>
      </el-table>
      <el-table
        showSummary
        tooltip-effect="light"
        v-else
        rowClassName="row_table"
        cellClassName="cell_table"
        headerCellClassName="header_table"
        headerRowClassName="header_row_table"
        headerAlign="center"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          prop="bodyIndustryRemarks"
          label="单位业态"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shouldRegister"
          label="应注册"
          width="70"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="registered"
          label="已注册"
          width="60"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="administratorNum"
          label="食安管理员"
          align="right"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="practitionerNum"
          label="从业人员"
          width="90"
          align="right"
          header-align="center"
        >
        </el-table-column>
      </el-table>
    </div> -->
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  // props:[],
  props: {
    code: {
      type: String,
      default: "320500",
    },
  },
  // 页面加载
  created() {
    // this.findStatisticalRegistrations();
  },
  // 页面加载完成
  mounted() {
    // this.queryInfo();
    if (!this.myChartColumnar) {
      this.myChartColumnar = echarts.init(
        document.getElementById("main_right")
      );
    }
    if (!this.myChart) {
      this.myChart = echarts.init(
        document.getElementById("main_chart"),
        "dark"
      );
    }

    Promise.all([
      this.findHealthStatistics(),
      this.findFoodPerformanceResponse(),
      this.findStatisticalRegistrations(),
      this.findBodyIndustryRemarks(),
    ]).then((res) => {
      this.data = res[0].data;
      this.Columnar();
      this.BodyIndustryTotals = res[1].data;
      this.pieChart();
      this.countRegistrations = res[2].data[0].isAnMainResponse;

      this.companyList = res[3].data.filter(
        (x) => x.bodyIndustry == "单位食堂"
      );
      this.tableData = res[3].data.filter(
        (x) => x.bodyIndustry == "餐饮服务经营者"
      );
      this.loading = false;
    });

    // 饼图
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      tableData: [],
      companyList: [],
      isCompany: true,
      data: {},
      register: {
        backgroundImage:
          "url(" + require("@/assets/images/adyRegister.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        backgroundPosition: "bottom",
      },
      note: {
        backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      note1: {
        backgroundImage:
          "url(" + require("@/assets/images/green_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      note2: {
        backgroundImage:
          "url(" + require("@/assets/images/yellow_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      note3: {
        backgroundImage: "url(" + require("@/assets/images/red_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      note4: {
        backgroundImage: "url(" + require("@/assets/images/dai_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      red: {
        backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "70% 73%",
        backgroundPosition: "bottom",
      },
      yellow: {
        backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "70% 73%",
        backgroundPosition: "bottom",
      },
      green: {
        backgroundImage: "url(" + require("@/assets/images/perfect.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "70% 73%",
        backgroundPosition: "bottom",
      },
      dataBg: {
        backgroundColor: "rgba(32,72,136,.1)",
        // backgroundImage: "url(" + require("@/assets/images/dataBg.png") + ")",
        // backgroundRepeat: "no-repeat",
        // backgroundSize: "100% 100%",
      },
      myChart: "",
      myChartColumnar: "",
      dialogVisible: false,
      type: 0,
      countRegistrations: {},
      loading: true,
      BodyIndustryTotals: {},
    };
  },
  // 方法
  methods: {
    //

    findFoodPerformanceResponse() {
      return this.$http.findFoodPerformanceResponse({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.countRegistrations = res.data.countRegistrations;
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    findStatisticalRegistrations() {
      return this.$http.findStatisticalRegistrations({
        params: {
          parentCode: this.code,
        },
      });
    },
    pieChart() {
      // 饼图

      // let option = {
      //   color: ["#FF0000", "#FFD700", "#008000"],
      //   title: {
      //     top: 12,
      //     text: "食安指数各分值段占比",
      //     //  subtext: '各区注册单位数',
      //     left: "center",
      //     textStyle: {
      //       fontSize: 16,
      //     },
      //   },
      //   backgroundColor: "rgba(32,72,136,.1)",
      //   tooltip: {
      //     trigger: "item",
      //     // formatter: "{a} <br/>{b} : {c} ({d}%)",
      //     formatter: function (e) {
      //       return (
      //         "食安指数" +
      //         e.data.name +
      //         ":" +
      //         e.value +
      //         "家(" +
      //         e.percent +
      //         "%)"
      //       );
      //     },
      //   },
      //   // legend: {
      //   //   orient: "vertical",
      //   //   left: "left",
      //   //   data: ["姑苏区", "工业园区", "相城区", "昆山市","常熟","张家港市","吴江","吴中","高新"],

      //   //   textStyle: {
      //   //     color: "white",
      //   //   },
      //   // },
      //   series: [
      //     {
      //       name: "注册占比",
      //       type: "pie",
      //       radius: ["45%", "60%"],
      //       center: ["50%", "65%"],
      //       data: [
      //         {
      //           value: Object.values(this.BodyIndustryTotals.man0079).reduce(
      //             (acc, cur) => acc + cur
      //           ),
      //           name: "0-79",
      //           color: ["#00000"],
      //         },
      //         {
      //           value: Object.values(this.BodyIndustryTotals.man7990).reduce(
      //             (acc, cur) => acc + cur
      //           ),
      //           name: "80-89",
      //         },
      //         {
      //           value: Object.values(this.BodyIndustryTotals.man9000).reduce(
      //             (acc, cur) => acc + cur
      //           ),
      //           name: "90+",
      //         },
      //       ],
      //       // [
      //       //   { value: 335, name: "姑苏区" },
      //       //   { value: 310, name: "工业园区" },
      //       //   { value: 234, name: "相城区" },
      //       //   { value: 935, name: "昆山市" },
      //       //   { value: 935, name: "常熟" },
      //       //   { value: 935, name: "张家港市" },
      //       //   { value: 935, name: "吴江" },
      //       //   { value: 935, name: "吴中" },
      //       //   { value: 935, name: "高新" },
      //       // ]

      //       emphasis: {},
      //       label: {
      //         color: "#fff",
      //       },
      //       //
      //     },
      //   ],
      // };
      let option = {
        //  grid: {
        //   left: "15%",
        //   bottom: "25%",
        //   top: "25%",
        //   right:"20%"
        // },
        legend: {
          top: 10,
          data: ["90-100", "80-89", "70-79", "60-69", "0-59"],
          textStyle: {
            color: "white",
          },
        },
        // color: ["#008000", "#FFD700", "#FF0000"],
        color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
        backgroundColor: "rgba(32,72,136,.1)",
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     subtext: '纯属虚构',
        //     left: 'center'
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        // legend: {
        //     left: 'center',
        //     top: 'bottom',
        //     data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        // },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: {
        //       show: true,
        //       type: ["pie", "funnel"],
        //     },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        series: [
          // {
          //     name: '半径模式',
          //     type: 'pie',
          //     radius: [20, 110],
          //     center: ['25%', '50%'],
          //     roseType: 'radius',
          //     label: {
          //         show: false
          //     },
          //     emphasis: {
          //         label: {
          //             show: true
          //         }
          //     },
          //     data: [
          //         {value: 10, name: 'rose1'},
          //         {value: 5, name: 'rose2'},
          //         {value: 15, name: 'rose3'},
          //         {value: 25, name: 'rose4'},
          //         {value: 20, name: 'rose5'},
          //         {value: 35, name: 'rose6'},
          //         {value: 30, name: 'rose7'},
          //         {value: 40, name: 'rose8'}
          //     ]
          // },
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 70],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              { value: this.BodyIndustryTotals.fractionOne,Proportion:this.BodyIndustryTotals.percentageOne, name: "90-100" },
              { value: this.BodyIndustryTotals.fractionTwo,Proportion:this.BodyIndustryTotals.percentageTwo, name: "80-89" },
              { value: this.BodyIndustryTotals.fractionThree,Proportion:this.BodyIndustryTotals.percentageThree, name: "70-79" },
              { value: this.BodyIndustryTotals.fractionFour,Proportion:this.BodyIndustryTotals.percentageFour, name: "60-69" },
              { value: this.BodyIndustryTotals.fractionFive,Proportion:this.BodyIndustryTotals.percentageFive, name: "0-59" },
            ],
             hoverAnimation: false,
             label: {
              color: "#fff",
              show: true,
              		formatter: function(e) {
                            return `${e.data.value}家(${e.data.Proportion})`
      					},
            },
            
            //   itemStyle: {
            //     normal: {
            //         borderColor: "#00ffff",
            //         borderWidth: 12,
            //     },

            //     emphasis: {
            //         borderColor: "#00ffff",
            //         borderWidth: 2,
            //              shadowBlur: 8,
            //     borderColor: "#00ffff",
            //     shadowColor: "#00ffff",
            //     },
            // },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    Columnar() {
      // var option = {
      //   title: {
      //     top: 13,
      //     text: "信息码状态分析",
      //     //  subtext: '各区注册单位数',
      //     left: "center",
      //     textStyle: {
      //       fontSize: 16,
      //       color: "#ffffff",
      //       height: 50,
      //     },
      //   },
      //   backgroundColor: "rgba(32,72,136,.1)",
      //   tooltip: {
      //     trigger: "axis",

      //     axisPointer: {
      //       type: "shadow",
      //     },
      //   },
      //   legend: {
      //     top: "15%",
      //     data: ["即将到期", "已到期", "待完善"],
      //     textStyle: {
      //       color: "white",
      //     },
      //   },
      //   toolbox: {
      //     show: false,
      //     feature: {
      //       dataView: {
      //         show: true,
      //         readOnly: false,
      //       },
      //       magicType: {
      //         show: true,
      //         type: ["bar"],
      //       },
      //       restore: {
      //         show: true,
      //       },
      //       saveAsImage: {
      //         show: true,
      //       },
      //     },
      //   },
      //   calculable: true,
      //   xAxis: [
      //     {
      //       axisLine: {
      //         lineStyle: {
      //           color: "white", //坐标轴的颜色
      //         },
      //       },
      //       type: "category",
      //       data: ["身份证", "健康证明", "安全考试"],
      //     },
      //   ],
      //   grid: {
      //     left: "20%",
      //     bottom: "8%",
      //     top: "35%",
      //   },
      //   yAxis: [
      //     {
      //       type: "value",
      //       name: "人数",
      //       // min: 0,
      //       // max: Math.max(...maxdata),
      //       // interval: Math.max(...maxdata)/10,
      //       axisLabel: {
      //         // textStyle: {
      //         //   color: "white", //坐标的字体颜色
      //         // },
      //         formatter: "{value} ",
      //       },
      //       axisLine: {
      //         show: true,
      //         lineStyle: {
      //           color: "white", //坐标轴的颜色
      //         },
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //     },
      //   ],

      //   series: [
      //     // {
      //     //   name: "未到期",
      //     //   type: "bar",
      //     //   data: [ this.data.jKGreen, this.data.kSGreen],
      //     //   barWidth: 15,
      //     //   color: ["#008000"],
      //     //   label: {
      //     //     show: true,
      //     //     position: "top",
      //     //     color: "#fff",
      //     //   },
      //     // },

      //     {
      //       name: "即将到期",
      //       type: "bar",
      //       data: [
      //         this.data.dabhYellow,
      //         this.data.jKYellow,
      //         this.data.kSYellow,
      //       ],
      //       barWidth: 15,
      //       color: ["#FFD700"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //     {
      //       name: "已到期",
      //       type: "bar",
      //       data: [
      //         this.data.dabhRed,
      //         this.data.jKRed,
      //         this.data.kSRed,
      //         // this.data.dabhYellow,
      //         // this.data.dabhGreen,
      //       ],
      //       barWidth: 15,
      //       color: ["#FF0000"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //     {
      //       name: "待完善",
      //       type: "bar",
      //       data: [this.data.dabhEmpty, this.data.jKEmpty, this.data.kSEmpty],
      //       barWidth: 15,
      //       color: ["#0071F9"],
      //       label: {
      //         show: true,
      //         position: "top",
      //         color: "#fff",
      //       },
      //     },
      //   ],
      // };














  //     var data = [
  //       {
  //         name: "已到期",
  //         value: 70,
  //       },
  //       {
  //         name: "即将到期",
  //         value: 68,
  //       },
  //       {
  //         name: "待完善",
  //         value: 48,
  //       },
  //     ];

  //     let option = {
  //        title: [ {
  //       subtext: '身份证',
  //       left: '16.67%',
  //       top: '75%',
  //       textAlign: 'center',
  //       subtextStyle:{
  //         color: "white",
  //          fontSize: 12
  //       }
  //   }, {
  //       subtext: '健康证',
  //       left: '50%',
  //       top: '75%',
  //       textAlign: 'center',
  //       subtextStyle:{
  //         color: "white",
  //          fontSize: 12
  //       }
  //   }, {
  //       subtext: '安全考试',
  //       left: '83.33%',
  //       top: '75%',
  //       textAlign: 'center',
  //       subtextStyle:{
  //         color: "white",
  //          fontSize: 12
  //       }
  //   }],
  //       backgroundColor: "rgba(32,72,136,.1)",
  //       tooltip: {
  //         trigger: "item",
  //         formatter: "{a} <br/>{b} : {c} 占比({d}%)",
  //       },
  //       legend: {
  //         orient: "horizontal",
  //         left: 80,
  //         top: 10,
  //         data: ["已到期", "即将到期", "待完善"],
  //         textStyle: {
  //           color: "white",
  //         },
  //       },
  //       // title: [{
  //       //     text: 'Pie label alignTo'
  //       // }, {
  //       //     subtext: 'alignTo: "none" (default)',
  //       //     left: '16.67%',
  //       //     top: '75%',
  //       //     textAlign: 'center'
  //       // }, {
  //       //     subtext: 'alignTo: "labelLine"',
  //       //     left: '50%',
  //       //     top: '75%',
  //       //     textAlign: 'center'
  //       // }, {
  //       //     subtext: 'alignTo: "edge"',
  //       //     left: '83.33%',
  //       //     top: '75%',
  //       //     textAlign: 'center'
  //       // }],
  //       color: ["#ff0000", "#ffd700", "#1890ff"],
  //       series: [
  //         {
  //           name: "身份证",
  //           type: "pie",
  //           radius: ["45%", "60%"],
  //           center: ["50%", "50%"],
  //           data: [
  //             {
  //               name: "已到期",
  //               value: this.data.dabhRed,
  //             },
  //             {
  //               name: "即将到期",
  //               value: this.data.dabhYellow,
  //             },
  //             {
  //               name: "待完善",
  //               value: this.data.dabhEmpty,
  //             },
  //           ],
  //           animation: true,
  //           // label: {
  //           //   position: "outer",
  //           //   alignTo: "none",
  //           //   bleedMargin: 5,
  //           // },
  //           left: 0,
  //           right: "66.6667%",
  //           top: 0,
  //           bottom: 0,
  //           hoverAnimation: false,
  //           // itemStyle: {
  //           //   // normal: {
  //           //   //   label: {
  //           //   //     show: true, //隐藏文字
  //           //   //   },
  //           //   //   labelLine: {
  //           //   //     show: false, //隐藏指示线
  //           //   //   },
  //           //   // },
  //           //   normal: {
  //           //     borderWidth: 3, // 间距的宽度
  //           //     borderColor: "#0D1d50", //背景色
  //           //     label: {
  //           //       show: false, //隐藏文字
  //           //     },
  //           //     labelLine: {
  //           //       show: false, //隐藏指示线
  //           //     },
  //           //             borderWidth: 3, // 间距的宽度
  //           //     borderColor: "#0D1d50", //背景色
  //           //     opacity:0.8
  //           //   },
  //           // },
  //           // label: {
  //           //   color: "#fff",
  //           //   show: true,
  //           //   formatter: function (params) {
  //           //     return "身份证";
  //           //   },

  //           //   position: "center",
  //           // },
  //              label: {
  //             color: "#fff",
  //             show: true,
  //             // formatter: function (params) {
  //             //   return "健康证";
  //             // },
  //             position: "outside",
  //             fontSize:8,
  //           },
  //           labelLine:{
  //             show:true,
  //             smooth:true
  //           },
  //           itemStyle: {
  //             borderColor: "#0D1d50",
  //             borderWidth: 4,
  //           },
  //           // label: {
  //           //   normal: {
  //           //     formatter: function (params) {
  //           //       return "身份证";
  //           //     },

  //           //     position: "center",
  //           //     show: true,
  //           //     textStyle: {
  //           //       fontSize: "10",
  //           //       fontWeight: "normal",
  //           //       color: "#fff"
  //           //     },
  //           //   },
  //           // },
  //           avoidLabelOverlap: true,
  //         },
  //         {
  //             labelLine:{
  //             show:true,
  //           },
  //           name: "健康证",

  //           type: "pie",
  //           radius: ["45%", "60%"],
  //           center: ["50%", "50%"],
  //           data: [
  //             {
  //               name: "已到期",
  //               value: this.data.jKRed,
  //             },
  //             {
  //               name: "即将到期",
  //               value: this.data.jKYellow,
  //             },
  //             {
  //               name: "待完善",
  //               value: this.data.jKEmpty,
  //             },
  //           ],
  //           animation: true,
  //           // label: {
  //           //   position: "outer",
  //           //   alignTo: "labelLine",
  //           //   bleedMargin: 5,
  //           // },
  //           left: "33.3333%",
  //           right: "33.3333%",
  //           top: 0,
  //           bottom: 0,
  //           hoverAnimation: false,
  //           // itemStyle: {
  //           //   normal: {
  //           //     label: {
  //           //       show: true, //隐藏文字
  //           //     },
  //           //     labelLine: {
  //           //       show: true, //隐藏指示线
  //           //     },
  //           //             borderWidth: 3, // 间距的宽度
  //           //     borderColor: "#0D1d50", //背景色
  //           //     opacity:0.8
  //           //   },
  //           // },
  //           // label: {
  //           //   normal: {
  //           //     formatter: function (params) {
  //           //       return "健康证";
  //           //     },

  //           //     position: "center",
  //           //     show: true,
  //           //     textStyle: {
  //           //       fontSize: "10",
  //           //       fontWeight: "normal",
  //           //         color: "#fff"
  //           //     },
  //           //   },
  //           // },
  //           label: {
  //             color: "#fff",
  //             show: true,
  //             // formatter: function (params) {
  //             //   return "健康证";
  //             // },
  //             position: "inside",
  //             fontSize:8,
  //           },
  // //  label: {
  // //             position: "outer",
  // //             alignTo: "labelLine",
  // //             bleedMargin: 5,
  // //           },




  //           itemStyle: {
  //             borderColor: "#0D1d50",
  //             borderWidth: 4,
  //           },
  //         },
  //         {
  //           name: "安全考试",

  //           type: "pie",
  //           radius: ["45%", "60%"],
  //           center: ["50%", "50%"],
  //           data: [
  //             {
  //               name: "已到期",
  //               value: this.data.kSRed,
  //             },
  //             {
  //               name: "即将到期",
  //               value: this.data.kSYellow,
  //             },
  //             {
  //               name: "待完善",
  //               value: this.data.kSEmpty,
  //             },
  //           ],
  //           animation: true,
  //           // label: {
  //           //   position: "outer",
  //           //   alignTo: "edge",
  //           //   margin: 20,
  //           // },
  //           left: "66.6667%",
  //           right: 0,
  //           top: 0,
  //           bottom: 0,
  //           hoverAnimation: false,
  //           // itemStyle: {
  //           //   normal: {
  //           //     label: {
  //           //       show: true, //隐藏文字
  //           //     },
  //           //     labelLine: {
  //           //       show: true, //隐藏指示线
  //           //     },
  //           //             borderWidth: 3, // 间距的宽度
  //           //     borderColor: "#0D1d50", //背景色
  //           //     opacity:0.8

  //           //   },
  //           // },
  //           // label: {
  //           //   normal: {
  //           //     formatter: function (params) {
  //           //       return "安全考试";
  //           //     },
  //           //     position: "center",
  //           //     show: true,
  //           //     textStyle: {
  //           //       fontSize: "10",
  //           //       fontWeight: "normal",
  //           //         color: "#fff"
  //           //     },
  //           //   },
  //           // },
  //           // label: {
  //           //   color: "#fff",
  //           //   show: true,
  //           //   formatter: function (params) {
  //           //     return "安全考试";
  //           //   },

  //           //   position: "center",
  //           // },
  //              label: {
  //             color: "#fff",
  //             show: true,
  //             // formatter: function (params) {
  //             //   return "健康证";
  //             // },
  //             position: "inside",
  //             fontSize:8,
  //           },
  //           itemStyle: {
  //             borderColor: "#0D1d50",
  //             borderWidth: 4,
  //           },
  //         },
  //       ],
  //     };









 let option = {
   color: ["#ff0000", "#ffd700", "#1890ff"],
   backgroundColor: "rgba(32,72,136,.1)",
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    // legend: {
    //     orient: 'vertical',
    //     left: 10,
    //     data: ['直达', '营销广告', '搜索引擎']
    // },

            legend: {
          orient: "horizontal",
          top: 5,
          data:["已到期", "即将到期", "待完善"],
          // ["已到期", "即将到期", "待完善"]
          textStyle: {
            color: "white",
          },
        },
    series: [
        {
            name: '身份证',
            top:"10%",
            type: 'pie',
                radius: ['75%', '90%'],
            labelLine: {
                show: false
            },
                     data: [
              {
                name: "已到期",
                value: this.data.dabhRed,
              },
              {
                name: "即将到期",
                value: this.data.dabhYellow,
              },
              {
                name: "待完善",
                value: this.data.dabhEmpty,
              },
            ],
             hoverAnimation: false,
              label: {
              show: true,
              position:"inside",
              color:"#fff",
              fontWeight :700,
                   formatter: function (e) {
                    if(e.name=="即将到期"){
                      return "身份证"
                    }else{
                      return ''
                    }
                          
        },
              },
              labelLine:{
                show:true
              }
        },
         {
            top:"10%",
            name: '健康证明',
            type: 'pie',
         
            radius: ['45%', '60%'],
            labelLine: {
                show: false
            },
                       data: [
              {
                name: "已到期",
                value: this.data.jKRed,
              },
              {
                name: "即将到期",
                value: this.data.jKYellow,
              },
              {
                name: "待完善",
                value: this.data.jKEmpty,
              },
            ],
             hoverAnimation: false,
                label: {
              show: true,
              position:"inside",
              color:"#ffffff",
              fontWeight :700,

                       formatter: function (e) {
                    if(e.name=="即将到期"){
                      return "健康证明"
                    }else{
                      return ''
                    }
                          
        },
              },
        },
        {
            top:"10%",
            name: '食安考试',
            type: 'pie',
                      radius: ['15%', '30%'],

        labelLine: {
                show: false
            },
                  data: [
              {
                name: "已到期",
                value: this.data.kSRed,
              },
              {
                name: "即将到期",
                value: this.data.kSYellow,
              },
              {
                name: "待完善",
                value: this.data.kSEmpty,
              },
            ],
             hoverAnimation: false,
              label: {
              show: true,
              position:"inside",
              color:"#fff",
              fontWeight :700,

                              formatter: function (e) {
                    if(e.name=="待完善"){
                      return "食安考试"
                    }else{
                      return ''
                    }
                              }
                          
        // },
                          
        // },
              },
        }
    ]
};












      // 使用刚指定的配置项和数据显示图表。
      this.myChartColumnar.setOption(option);
    },
    findHealthStatistics() {
      return this.$http.findHealthStatistics({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.data = res.data;
      //     this.pieChart();
      //     this.Columnar();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    onconfirm() {
      this.dialogVisible = false;
    },
    showTable(e) {
      // this.type=e
      //  this.dialogVisible = true;
      this.$router.push({
        name: "query",
        query: { code: this.code, type: e + "" },
      });
    },
    findBodyIndustryRemarks() {
      return this.$http.findBodyIndustryRemarks({
        params: {
          parentCode: this.code,
        },
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "query-dialog": () => import("@/views/monitoring/components/query"),
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .top {
    padding: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100px;
      flex: 1;
      cursor: pointer;
      // max-width: 100px;
      .iten_son {
        min-width: 70px;
        min-height: 70px;
        display: flex;
        align-items: flex-start;
        text-align: center;
        justify-content: center;
        color: #4adefe;
        border-radius: 50%;
        font-size: 20px;
        // border: 5px  solid #62BCE1;
      }
      .text {
        color: #fff;
      }
    }
  }
  .red {
    color: #ff0000;
    text-align: center;
  }
  .yellow {
    color: #ffd700;
    text-align: center;
  }
  .green {
    color: #08e80f;
    text-align: center;
  }
  /deep/.row_table {
    background-color: transparent;
  }
  /deep/ .cell_table {
    padding: 3px;
  }
  /deep/ .header_table {
    padding: 0;
    font-size: 12px;
    background-color: transparent;
  }
  /deep/ .el-table,
  .el-table__cell {
    background-color: transparent;
  }

  /deep/ .el-table__cell {
    border: none !important;
    color: #fff;
  }
  /deep/ .el-table tr {
    background-color: transparent !important;
  }
  /deep/ .el-table__row:hover > td {
    background-color: transparent !important;
  }
  /deep/ .el-table::before {
    height: 0;
  }
  .button {
    padding: 5px;
  }
  /deep/.el-table__cell {
    padding: 0;
  }
  /deep/ .el-table__cell {
    background-color: transparent !important;
  }
  .switch_wapper {
    display: flex;
    justify-content: space-between;
    .link {
      color: #1890ff;
      text-decoration: underline;
    }
  }

  .title {
    width: 40%;
    text-align: left;
    color: #ffffff;
    padding: 8px 35px;
  }
  .list {
    background: rgba(32, 72, 136, 0.1);
    display: flex;
    justify-content: space-around;
    padding: 10px;
    font-size: 13px;
    .item {
      display: flex;
      // flex-basis: 100px;
      color: #ffffff;
      padding: 5px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
